<template>
  <div class="box1">
    <div class="box111">
      <!-- <div class="span1"><span>门店管理</span></div> -->
      <!-- <div class="image"><img src=".\image\u8.png" /></div> -->
      <!-- <div class="span2"><span>- 系统管理 - 成员管理</span></div> -->
      <!-- <div class="qianbao">当前成员数:&nbsp;{{useCount}}</div>-->
      <el-button class="butt5" @click="userAdd" size="small">新增</el-button>
      <div class="div2">
        <div class="div3">
          <span class="span3">数据列表</span>

          <!-- <div>
            <span class="span4">姓名:</span>
            <el-input placeholder="请输入姓名" v-model="name"></el-input>
          </div> -->
          <div>
            <span class="span5">标题:</span>
            <el-input
              placeholder="请输入联谊会的标题"
              v-model="sodTitle"
            ></el-input>
          </div>
          <el-button class="butt1" type="primary" size="small" @click="load"
            >搜索</el-button
          >

          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column
              prop="sodNumber"
              label="编号"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="sodTitle"
              label="标题"
              width="200"
            ></el-table-column>
            <!-- <el-table-column prop="sex" label="性别" width="100">
              <template slot-scope="scope">
                {{ sexType(scope.row.sex) }}
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              prop="themActTitle"
              label="活动标题"
              width="130"
            ></el-table-column> -->
            <el-table-column
              prop="sodPrincipal"
              label="负责人"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="sodFrom"
              label="来源"
              width="160"
            ></el-table-column>
            <el-table-column
              prop="sodTime"
              label="时间"
              width="160"
            ></el-table-column>
            <el-table-column
              prop="sodState"
              label="状态"
              width="160"
            ></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <div v-if="scope.row.sodState == '待审核'">
                  <el-button type="primary" @click="huifu(scope.row)"
                    >审核</el-button
                  >
                </div>
                <el-popconfirm
                  confirm-button-text="好的"
                  cancel-button-text="不用了"
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定删除吗？"
                  @confirm="del(scope.row.id)"
                >
                  <el-button type="danger" slot="reference">删除</el-button>
                </el-popconfirm>
                <div v-if="scope.row.sodState == '已发布'">
                  <el-button type="success" @click="chakan(scope.row)"
                    >查看</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 10px 0">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
        <!-- <el-dialog title="业绩查看" :visible.sync="dialogFormVisiblee" width="50%">

          <el-table :data="tableDataa" @selection-change="handleSelectionChange">
      <el-table-column prop="month" label="月份" width="150"></el-table-column>
      <el-table-column prop="visitFrequency" label="上门次数" width="100"></el-table-column>
         <el-table-column prop="recoveryFrequency" label="回收次数" width="100"></el-table-column>
        <el-table-column prop="deliveryFrequency" label="送货次数" width="150"></el-table-column>
        <el-table-column prop="income" label="收入(币)" width="180"></el-table-column>
    </el-table>

</el-dialog> -->

        <el-dialog
          title="联谊会"
          :visible.sync="dialogFormVisible"
          width="50%"
          :destroy-on-close="true"
        >
          <el-form label-width="80px" :model="form" :rules="rules" ref="forms">
            <!-- <el-form-item
              label="专题活动"
              :label-width="formLabelWidth"
              prop="themActivities"
            >
              <el-input
                v-model="form.themActivities"
                autocomplete="off"
              ></el-input>
            </el-form-item> -->

            <el-form-item
              label="标题"
              :label-width="formLabelWidth"
              prop="sodTitle"
            >
              <el-input
                v-model="form.sodTitle"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="负责人"
              :label-width="formLabelWidth"
              prop="sodPrincipal"
            >
              <el-input
                v-model="form.sodPrincipal"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="发布来源"
              :label-width="formLabelWidth"
              prop="sodFrom"
            >
              <el-input
                v-model="form.sodFrom"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="概述"
              :label-width="formLabelWidth"
              prop="sodInfo"
            >
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form.sodInfo"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="活动图片">
              <el-upload
                action="http://127.0.0.1:8088/villagepersonnel/sodality/addPic"
                list-type="picture-card"
                :on-preview="handlePictureCardPrevieww"
                :on-remove="handleRemovee"
                :on-success="checkCardd"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisiblee">
                <el-image width="100%" :src="goodsPicturee" alt="" />
              </el-dialog>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="unsave">取 消</el-button>
            <el-button type="primary" @click="save" :loading="logining"
              >确 定</el-button
            >
          </div>
        </el-dialog>

        <el-dialog
          title="联谊会"
          :visible.sync="dialogFormVisiblea"
          width="50%"
          :destroy-on-close="true"
        >
          <el-form
            label-width="80px"
            :model="formm"
            :rules="rules"
            ref="formss"
          >
                       <!-- <el-form-item
              label="专题活动"
              :label-width="formLabelWidth"
              prop="themActivities"
            >
              <el-input
                v-model="formm.themActivities"
                autocomplete="off"
              ></el-input>
            </el-form-item> -->

            <el-form-item
              label="标题"
              :label-width="formLabelWidth"
              prop="sodTitle"
            >
              <el-input
                v-model="formm.sodTitle"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="负责人"
              :label-width="formLabelWidth"
              prop="sodPrincipal"
            >
              <el-input
                v-model="formm.sodPrincipal"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="时间"
              :label-width="formLabelWidth"
              prop="sodTime"
            >
              <el-input
                v-model="formm.sodTime"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <!-- <el-form-item
              label="概述"
              :label-width="formLabelWidth"
              prop="themActInfo"
            >
              <el-input v-model="formmm.themActInfo" autocomplete="off"></el-input>
            </el-form-item> -->

            <el-form-item
              label="概述"
              :label-width="formLabelWidth"
              prop="sodInfo"
            >
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formm.sodInfo"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              label="图片"
              :label-width="formLabelWidth"
              prop="sodPhoto"
            >
              <img width="300px" :src="formm.sodPhoto" alt="" />
            </el-form-item>

            <!-- <el-form-item label="物品图片">
                            <el-upload
                    action="http://127.0.0.1:8088/villagepersonnel/personnel-info/addPic"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPrevieww"
                    :on-remove="handleRemovee"
                    :on-success="checkCardd"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisiblee">
                    <el-image width="100%" :src="goodsPicturee" alt="" />
                  </el-dialog>
            
        </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="unsavee">取 消</el-button>
            <el-button type="primary" @click="savee" :loading="logining"
              >通过</el-button
            >
          </div>
        </el-dialog>

        <el-dialog
          title="联谊会"
          :visible.sync="dialogFormVisibleaa"
          width="50%"
          :destroy-on-close="true"
        >
          <el-form
            label-width="80px"
            :model="formmm"
            :rules="rules"
            ref="formss"
          >
            <!-- <el-form-item
              label="专题活动"
              :label-width="formLabelWidth"
              prop="themActivities"
            >
              <el-input
                v-model="formmm.themActivities"
                autocomplete="off"
              ></el-input>
            </el-form-item> -->

            <el-form-item
              label="标题"
              :label-width="formLabelWidth"
              prop="sodTitle"
            >
              <el-input
                v-model="formmm.sodTitle"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="负责人"
              :label-width="formLabelWidth"
              prop="sodPrincipal"
            >
              <el-input
                v-model="formmm.sodPrincipal"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="时间"
              :label-width="formLabelWidth"
              prop="sodTime"
            >
              <el-input
                v-model="formmm.sodTime"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <!-- <el-form-item
              label="概述"
              :label-width="formLabelWidth"
              prop="themActInfo"
            >
              <el-input v-model="formmm.themActInfo" autocomplete="off"></el-input>
            </el-form-item> -->

            <el-form-item
              label="概述"
              :label-width="formLabelWidth"
              prop="sodInfo"
            >
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formmm.sodInfo"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              label="图片"
              :label-width="formLabelWidth"
              prop="sodPhoto"
            >
              <img width="300px" :src="formmm.sodPhoto" alt="" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="unsaveee">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
let user = localStorage.getItem("user")
  ? JSON.parse(localStorage.getItem("user"))
  : null;
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      form: {
        sod_photo: "",
      },
      value2: 5,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      formm: {},
      formmm: {},
      dialogFormVisibleaa: false,
      dialogFormVisiblea: false,
      dialogVisiblee: false,
      dialogFormVisible: false,
      dialogFormVisiblee: false,
      tableData: [],
      tableDataa: [],
      goodsPicturee: "",
      name: "",
      useCount: "",
      sodTitle: "",
    };
  },
  created() {
    this.load();
    //  this.tableData.goodsInfo.createTime= this.timestampToTime(this.tableData.goodsInfo.createTime)
    //  this.useCountFind();
    //  this.handlsEditt();
  },
  methods: {
    handlePictureCardPrevieww(file) {
      this.goodsPicturee = file.url;
      this.dialogVisiblee = true;
    },
    handleRemovee(file, fileList) {
      console.log(file, fileList);
    },
    checkCardd(file) {
      this.form.sod_photo = file;
      console.log(file);
    },

    timestampToTime(time) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    load() {
      this.$axios
        .get("/villagepersonnel/sodality/sodalityinfo", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            sodTitle: this.sodTitle,
          },
        })
        .then((res) => {
          console.log(
            "----------" + JSON.stringify(res.data.data.sodalityinfo)
          );

          this.tableData = res.data.data.sodalityinfo.records;
          this.total = res.data.data.sodalityinfo.total;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    del(id) {
      // this.form =JSON.parse(JSON.stringify(row));
      //       this.dialogFormVisible = true;
      this.$axios
        .get("/villagepersonnel/sodality/deleteInfo/" + id)
        .then((res) => {
          if (res.data.code == "20000") {
            this.$message.success("删除成功");
            this.load();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    sexType(sex) {
      if (sex == 1) {
        return "男";
      } else {
        return "女";
      }
    },

    chakan(row) {
      this.formmm = JSON.parse(JSON.stringify(row));
      this.dialogFormVisibleaa = true;
    },
    huifu(row) {
      this.formm = JSON.parse(JSON.stringify(row));
      //  alert(this.formm.id)
      //  this.goodsPicturee = row.headPhoto
      //  alert(this.goodsPicturee)

      this.dialogFormVisiblea = true;
    },

    handlsEdit(row) {
      if (row.sex == "1") {
        row.sex = "1";
      } else {
        row.sex = "2";
      }
      this.form = JSON.parse(JSON.stringify(row));
      //alert(this.form.id)
      //  this.goodsPicturee = row.headPhoto
      //  alert(this.goodsPicturee)

      this.dialogFormVisible = true;
    },

    userAdd() {
      // this.form=''
      this.dialogFormVisible = true;
    },

    unsave() {
      this.dialogFormVisible = false;
    },
    unsavee() {
      this.dialogFormVisiblea = false;
    },
    unsaveee() {
      this.dialogFormVisibleaa = false;
    },

    savee() {
      this.$refs["formss"].validate((valid) => {
        if (valid) {
          if (this.formm.id) {
            this.$axios
              .post("/villagepersonnel/sodality/updatedInfo", this.formm)
              .then((res) => {
                if (res.data.code == "20000") {
                  this.$message.success("审核成功");
                  this.dialogFormVisiblea = false;
                  this.load();
                } else {
                  this.$message.error("审核失败");
                }
              })
              .catch((err) => {
                console.error(err);
              });
          }
          // else {
          //   this.$axios
          //     .post("/villagepersonnel/personnel-info/addInfo", this.form)
          //     .then((res) => {
          //       if (res.data.code == "20000") {
          //         this.$message.success("添加成功");
          //         this.dialogFormVisible = false;
          //         this.load();
          //         this.useCountFind();
          //       } else {
          //         this.$message.error("添加失败");
          //       }
          //     })
          //     .catch((err) => {
          //       console.error(err);
          //     });
          // }
        }
      });
    },
    save() {
      this.$refs["forms"].validate((valid) => {
        if (valid) {
          // if (this.form.id) {
          //   this.$axios
          //     .post("/villagepersonnel/personnel-info/updatedInfo", this.form)
          //     .then((res) => {
          //       if (res.data.code == "20000") {
          //         this.$message.success("修改成功");
          //         this.dialogFormVisible = false;
          //         this.load();
          //       } else {
          //         this.$message.error("修改失败");
          //       }
          //     })
          //     .catch((err) => {
          //       console.error(err);
          //     });
          // } else {
          this.$axios
            .post("/villagepersonnel/sodality/addInfo", this.form)
            .then((res) => {
              if (res.data.code == "20000") {
                this.$message.success("添加成功");
                this.dialogFormVisible = false;
                this.load();
                this.useCountFind();
              } else {
                this.$message.error("添加失败");
              }
            })
            .catch((err) => {
              console.error(err);
            });
          // }
        }
      });
    },
  },
};
</script>

<style scoped>
.box1 {
  position: relative;
  height: 880px;
  background-color: rgba(247, 248, 253, 1);
}
.box111 {
  position: absolute;
  width: 100%;
  height: 280px;
  background-color: rgba(181, 191, 209);
}
.span1 {
  position: absolute;
  top: 45px;
  left: 320px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
}
.span2 {
  position: absolute;
  top: 48px;
  left: 455px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  font-size: 14px;
}
.qianbao {
  position: absolute;
  top: 48px;
  left: 1120px;
  font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI";
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
}
.butt5 {
  position: absolute;
  top: 43px;
  left: 1290px;
  border-radius: 6px;
  width: 100px;
  height: 33px;
  color: #32325d;
}
.image {
  position: absolute;
  top: 46px;
  left: 425px;
  font-size: 14px;
}
.div2 {
  position: absolute;
  top: 100px;
  left: 70px;
  background-color: rgba(255, 255, 255, 1);
  width: 1300px;
  height: 688px;
  -webkit-box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  box-shadow: 1px 1px 20px rgb(0 0 0 / 35%);
  border-radius: 8px;
}
.div3 {
  position: absolute;
  top: 18px;
  left: 0px;
  height: 30px;
  width: 1300px;
}
.span3 {
  float: left;
  font-size: 17px;
  color: #32325d;
  line-height: 30px;
  margin-left: 22px;
  font-weight: 500;
}
.span4 {
  float: left;
  font-size: 12px;
  color: #32325d;
  line-height: 30px;
  margin-left: 262px;
  font-weight: 500;
}
.el-input >>> .el-input__inner {
  width: 172px;
  height: 32px;
}
.el-input {
  float: left;
  width: 0px;
  margin-left: 10px;
}
.span5 {
  float: left;
  font-size: 12px;
  color: #32325d;
  line-height: 30px;
  margin-left: 202px;
  font-weight: 500;
}
.span6 {
  float: left;
  font-size: 12px;
  color: #32325d;
  line-height: 30px;
  margin-left: 12px;
}
.butt1 {
  float: left;
  border-radius: 6px;
  width: 82px;
  height: 30px;
  margin-left: 200px;
}

.el-select .el-input {
  width: 202px;
  height: 20px;
}
.el-select {
  position: relative;
  right: 242px;
}
</style>